<template>
	<view class="to_be_used">
		<scroll-view scroll-y class="scroll_view">
			<view class="list">
				<view class="item" v-for="item in 99">
					<view class="item_view">
						<view class="name">至尊卡优惠券至尊卡优惠券至尊卡优惠券</view>
						<view class="time">2023.08.01-2024.08.31</view>
						<view class="rule">使用规则：全平台商品通用</view>
					</view>
					<view class="item_cell">
						<view class="cell">
							<view class="price">
								<view class="unit">￥</view>
								<view class="value">30</view>
							</view>
							<view class="tips">满￥10使用</view>
						</view>
						<view class="btn">立即使用</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
</script>

<style scoped lang="scss">
	.to_be_used{
		.scroll_view {
			height: calc(100vh - var(--window-top) - var(--window-bottom) - #{$navBarHeight} - 196rpx);
		
			.list {
				padding: 0 22rpx;
				box-sizing: border-box;
		
				.item {
					width: 100%;
					height: 220rpx;
					margin-top: 20rpx;
					background: url(@/static/images/item1.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
		
					.item_view {
						flex: 1;
						overflow: hidden;
						padding-left: 36rpx;
						padding-top: 40rpx;
						box-sizing: border-box;
		
						.name {
							color: #222222;
							font-size: 32rpx;
							font-weight: bold;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
		
						.time {
							color: #222222;
							font-size: 22rpx;
							margin: 26rpx 0;
						}
		
						.rule {
							color: #222222;
							font-size: 22rpx;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
		
					.item_cell {
						width: 220rpx;
						padding: 0 0 26rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
		
						.cell {
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
		
							.price {
								display: flex;
								align-items: flex-end;
		
								.unit {
									color: #FFFFFF;
									font-size: 44rpx;
									font-weight: bold;
								}
		
								.value {
									color: #FFFFFF;
									font-size: 70rpx;
									font-weight: bold;
								}
							}
		
							.tips {
								color: #FFFFFF;
								font-size: 22rpx;
								font-weight: bold;
							}
						}
		
						.btn {
							width: 128rpx;
							height: 42rpx;
							line-height: 42rpx;
							text-align: center;
							color: #FF4855;
							font-size: 20rpx;
							border-radius: 21rpx;
							background: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>